<template>
	<view class="logincontainner">
		<view class="userImg">
			<uv-image src="/static/user.jpg" shape="circle" width="80px" height="80px"></uv-image>
		</view>
		<uv-form labelPosition="left" :model="userInfo" :rules="rules" ref="formRef">
			<uv-form-item label="学号:" prop="stuNum" borderBottom>
				<uv-input placeholder="请输入账号" v-model="userInfo.stuNum" border="none">
				</uv-input>
			</uv-form-item>
			<uv-form-item label="密码:" prop="password" borderBottom>
				<uv-input type='password' placeholder="请输入密码" v-model="userInfo.password" border="none">
				</uv-input>
			</uv-form-item>
		</uv-form>
		<view class="loginBtn">
			<uv-button color="#6ECEB0" type="primary" text="登录" customStyle="margin-top: 10px" @click="login"></uv-button>
			<uv-button color="#6ECEB0" type="primary" text="注册" customStyle="margin-top: 30px" @click="toRegister"></uv-button>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive, ref
	} from 'vue'
	import {loginApi} from '../../api/index.js'
	//表单ref属性
	const formRef = ref()
	//表单绑定的对象
	const userInfo = reactive({
		stuNum: '001',
		password: '11'
	})
	//表单验证规则
	const rules = reactive({
		'stuNum': {
			type: 'string',
			required: true,
			message: '请输入账号',
			trigger: ['blur', 'change']
		},
		'password': {
			type: 'string',
			required: true,
			message: '请输入密码',
			trigger: ['blur', 'change']
		}
	})
	//登录
	const login = ()=>{
		console.log(userInfo)
		formRef.value.validate().then(async(res) => {
					let result = await loginApi(userInfo)
					if(result && result.code == 200){
						uni.setStorageSync("userId",result.data)
						uni.switchTab({
							url:'../index/index'
						})
					}
				})
	}
	//去注册
	const toRegister = ()=>{
		uni.navigateTo({
			url:'../register/register'
		})
	}
</script>

<style>
	page {
		background-color: #FFF;
	}
</style>
<style scoped lang="scss">
	.logincontainner {
		padding: 30px 50rpx;

		.userImg {
			padding: 30px 20px;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.loginBtn{
			margin-top: 50px;
		}
	}
</style>
